<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文本与图片标签示例</title>
</head>
<body>
  <h1>一级标题：前端技术介绍</h1>
  <h2>二级标题：HTML基础标签</h2>
  <p>HTML（超文本标记语言）是构建网页的基础。它通过标签定义页面的结构和内容，例如：</p>
  <p>强调文本可以使用<strong>strong标签（加粗，表示重要性）</strong>或<em>em标签（斜体，表示强调）</em>。</p>
  <h3>三级标题：常用列表</h3>
  <p>前端三大核心技术：</p>
  <ul>
    <li>HTML（结构）</li>
    <li>CSS（样式）</li>
    <li>JavaScript（交互）</li>
  </ul>
  <p>学习步骤：</p>
  <ol>
    <li>掌握HTML基础标签</li>
    <li>学习CSS格式美化</li>
    <li>实践JavaScript交互</li>
  </ol>
  <blockquote cite="https://example.com/quotes">
    <p>优秀的前端代码，既要有良好的结构，也要有友好的用户体验。</p>
  </blockquote>
  <p>正如古语所说：<q>工欲善其事，必先利其器</q>，掌握基础标签是前端学习的第一步。</p>
  <h3>三级标题：图片展示</h3>
  <p>HTML logo（带alt文本，图片加载失败时显示）：</p>
  <img 
    src="https://picsum.photos/id/0/300/200" 
    alt="HTML5标志图" 
    width="300" 
    height="200"
    loading="lazy"  <!-- 延迟加载，提升页面性能 -->
    >
  <p>响应式图片（根据屏幕宽度自动适配）：</p>
  <picture>
    <source media="(max-width: 600px)" srcset="https://picsum.photos/id/1/300/200">
    <source media="(min-width: 601px)" srcset="https://picsum.photos/id/1/600/400">
    <img src="https://picsum.photos/id/1/400/300" alt="响应式示例图">
  </picture>
</body>
</html>